var $image = $(".image"),
    $box = $(".box"),
    $dot = $(".dot");

var index = 0,
    timer = null;
var arrImg = [ 'b0', 'b1', 'b2', 'b3', 'b4'];
var beforArr = [],
    afterArr = [],
    newArr = [];

//节流处理
var throttle = (fn,delay) =>{
    var flag = true;
    return (args) => {
        if( !flag ) return;
        flag = false;
        setTimeout( () =>{
            fn.apply(this, args);
            flag = true;
        }, delay);
    }
};
// 左右按钮切换图片
$(".leftBtn").click(throttle(function (){
    change( index - 1);
}, 400));

$(".rightBtn").click(throttle(function (){
    change( index + 1);
}, 400));

//点操作
$dot.each(function(i){
    $(this).click(function(){
        index = $dot.index(this);
        change( index );
    })
});

timer = setInterval(function () {
    change( index + 1);
},3000);

//鼠标移入移出添加删除定时器
$box.hover(function(){
    clearInterval(timer);
},function () {
    timer = setInterval(function () {
        change( index + 1);
    },3000);
});

function change(crrIndex) {
    if( crrIndex < 0){
        index = $image.length - 1;
    }else if( crrIndex > $image.length - 1){
        index  = 0
    }else{
        index = crrIndex;
    }
    beforArr = arrImg.slice(arrImg.length - index);
    afterArr = arrImg.slice(0, arrImg.length - index);
    newArr = beforArr.concat(afterArr);

    $image.each(function(i){
        $(this).addClass(newArr[i]).siblings().removeClass(newArr[i]);
    });

    $dot.removeClass("active").eq(index).addClass("active");
}



